<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue2.6.10.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.inner {
				height: 150px;
				background-color: darkcyan;
			}
		</style>
	</head>
	<body>
		<div id="app">


			<!-- <div class="inner" @click="divclick">
				使用 .stop  阻止事件冒泡
				<input type="button" value="戳他" @click.stop="btnclick">
			</div> -->


			<!-- 使用 .prevent 阻止事件默认行为 -->
			<!-- <a href="http://www.baidu.com" @click.prevent="linkclick">去百度</a> -->
			
			
			
			<!-- 使用  .capture  实现捕获触发事件的机制-->
			<!-- <div class="inner" @click.capture="divclick">
				<input type="button" value="戳他" @click="btnclick">
			</div> -->
			
			
			<!-- 使用  .self  实现只有点击当前元素的时候，才会触发事件的处理函数-->
			<!-- <div class="inner" @click.self="divclick">
				<input type="button" value="戳他" @click="btnclick">
			</div> -->
			
			
			<!-- 使用  .once   只触发一次时间处理函数 -->
			<!-- <a href="http://www.baidu.com" @click.prevent.once="linkclick">去百度</a> -->
		</div>


	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data() {
				return {

				}
			},
			methods: {
				divclick() {
					console.log("这是出发了inner div 的点击事件")
				},
				btnclick() {
					console.log("这是触发了按钮的点击事件")
				},
				linkclick(){
					console.log("这是出发了链接的点击事件")
				}
			},
		})
	</script>
</html>
